<template>
  <div ref="videsInfoBoxMain">
    <div class="title" >
      <span class="line"></span>
      <span
        ><i class="el-icon-arrow-left" v-show="!showVideoDetailsInfo" style="margin-right:30px;cursor: pointer;font-size:18px;font-weight:1000;" @click="blackVideo()"></i><i style="font-size: 0.1rem" class="iconfont icon-shipin"></i>
        {{$t('wechat.videoList')}}</span
      >
    </div>
    <transition name="el-zoom-in-center">
    <div @scroll="handleScroll" ref="videoList" v-show="showVideoDetailsInfo" class="gutter-example">
      <div v-for="(item,index) in videoList" :key="index" @click="playVideo(item)" class="itemBoxVideo"  >
        <div>
        <video
        ref="media"  width="100%" height="260"  :src="item.respath" ></video>
        <!-- <div v-else class="itemBoxVideo" style="width:100%;text-align: center;padding-top: 80px;" ><i class="el-icon-warning-outline" style="color:#2196f3;"></i> {{$t('wechat.zhuanma')}}</div> -->
      </div>

        <svg class="playLogo" width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#c6c6ca" stroke="#c6c6ca" stroke-width="4" stroke-linejoin="round"/><path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="#FFF" stroke="#FFF" stroke-width="4" stroke-linejoin="round"/></svg>
      </div>
      <div class="loadingBox" v-if="showLoading" style="color:#2196f3;"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
    </div>
  </transition>

    <!-- 详情区 -->
      <div v-if="!showVideoDetailsInfo" class="detailsBox">
        <div>
          <!-- <video v-if="formate(videoActionData)" width="100%" height="220" controls :src="formateScr" ></video> -->
          <video width="100%" height="220" controls :src="formateScr" ></video>
        </div>
        <h3 style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">{{$t('wechat.videoInfo')}}</h3>
        <div style="padding-left:10px;" ><i class="el-icon-warning-outline"></i> {{$t('wechat.playTip')}} <el-link type="primary" style="float: right;margin-right:20px;" @click="codeFormate(videoActionData)"><i v-if="showTime" class="el-icon-loading"></i> {{$t('wechat.playzhuanma')}}</el-link><el-link title="点击跳定位到聊天" type="primary" style="" @click.stop="positionMessage(videoActionData)">定位到聊天</el-link></div>
        <div style="padding-left:10px;"><i class="el-icon-folder"></i> 来源：{{ videoActionData.contactname }}</div>
        <div style="padding-left:10px;"><i class="el-icon-folder"></i> 时间：{{ formateDate(videoActionData.msgtime) }}</div>
        <!-- <div style="padding-left:10px;"><i class="el-icon-files"></i> {{$t('wechat.fileSize')}}:{{(videoActionData.filesize/1048576).toFixed(3)}}MB ({{videoActionData.filesize}}Byte)</div> -->
        <div style="padding-left:10px;"><i class="el-icon-lock"></i> MD5：{{ videoActionData.filemd5 }}</div>
        <div style="padding-left:10px;word-wrap: break-word;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ videoActionData.respath }}</div>
      </div>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import { getWxMediaInfo,getFormateCode } from '@/api/weChat/weChat_api'
import { parseTime } from "@/utils/index";
import { Alert } from 'element-ui';
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';

export default {
  name: "wxVideo1",
  props:['sendData'],
  components: {
    videoPlayer,
  },
  data() {
    return {
      scrollTopData:0,
      showTime:false,
      debounceTimer:null,
      videoList:[],
      showLoading:false,
      loadClass:'el-icon-loading',
      loadingText:'正在加载. . .',
      formateScr:'',
      videoActionData:'',
      showVideoDetailsInfo:true,
      showRemark:false,
      remark:'',
      id:'',
      index:null,
      html:'转码',
      show:false,
      tableData:[],
      offset:1,
      limit:20,
      total:0,
      src: "",
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "", // url地址
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
    };
  },
  created() {
      if(this.sendData.list_offset){
    this.offset=1;
    this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1;
      this.total=0;
    }

    this.init();
  },
  watch: {
    "$store.state.account.weChat1": function () {
      if(this.sendData.list_offset){
    this.offset=1;
    this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1;
      this.total=0;
    }
    this.showVideoDetailsInfo = true;
    this.videoList = [];
      this.init();
    },
  },
  mounted() {
},
  methods: {
    // 定位到聊天
    positionMessage(item){
      this.showVideoDetailsInfo = true;
      // item['proof_num'] = this.sendData.proof_num;
      // item['username'] = sessionStorage.getItem('usernameTitle');
      // item['model'] = 'wechat';
      // item['msgtime'] = item.msgtime;
      // item['contact_username'] = item.contactname;
      // item['id'] = item.id;
      // item['list_offset'] = 1;
      // item['msg_offset'] = 1;
      // item['app_name'] = item.contactname.includes('@')?'群组':'好友';

      item['proof_num'] = this.sendData.proof_num;
      item['username'] = sessionStorage.getItem('usernameTitle');
      item['model'] = 'wechat';
      item['msgtime'] = item.msgtime;
      item['contact_username'] = item.contactname;
      item['id'] = item.id;
      item['list_offset'] = this.offset;
      item['msg_offset'] = 1;
      item['app_name'] = item.contactname.includes('@')?'群组':'好友';
      item['wxChildrenNode'] = true;
      item['scrollTop'] = this.scrollTopData;
      item['childrenModel'] = 'WXvideo';
      item['account_id'] = this.sendData.account_id;

      // 储存类型
      sessionStorage.setItem('model',"wechat")
      // 储存节点数据
      sessionStorage.setItem('sumData',JSON.stringify(item))
      // 激活跳转组件
      this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
      sessionStorage.setItem('only',true);
    },
    handleScroll:throttle(function(){

      // 获取列表元素
      const list = this.$refs.videoList;
    this.scrollTopData = list.scrollTop;

      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
        this.showLoading=true;

        if(this.videoList.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          this.offset++;
          // 加载更多数据
          let that = this;
              that.init();
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }

      }
    },1000),
    codeFormate(row){
      this.showTime = true;
      let data={
        mediaPath:row.respath,
        mediaType:2
      }
      getFormateCode(data).then(res=>{
      this.formateScr=res.data[0].direction;
      this.showTime = false;
      }).catch(err=>{
        this.showTime = false;
      })
    },
    formate(item){
      let filename = item.respath;
      if(filename.includes('.')){
        let extension = filename.match(/(?:\.([^.]+))?$/)[1];
          if(extension !=='mp4' && extension !=='MP4'){
            return true
          }else{
            return false
          }
      }else{
          return true
      }
      
    },
    blackVideo(){
      this.showVideoDetailsInfo = true;
      this.formateScr = '';
    },
    playVideo(item){
      this.showVideoDetailsInfo = false;
      this.videoActionData = item;
      this.formateScr = item.respath;
    },
    getRefsAff(){
      return  this.$refs.videsInfoBoxMain;
    },
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:'',
        account_id:'',
        subtype:this.sendData.subtype,
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    getFileSize(fileByte) {
    var fileSizeByte = fileByte;
    var fileSizeMsg = "";
    if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
    else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
    else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
    else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
    else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
    else fileSizeMsg = "文件超过1TB";
    return fileSizeMsg;
},
    formateCodeVideo(row,index){
      this.index=index
      this.show=true
      this.html=``
      let data={
        mediaPath:row.path,
        mediaType:2
      }
      getFormateCode(data).then(res=>{
      this.show=false
      // res.data.direction
      this.tableData[index].path=res.data[0].direction
      this.html=`转码`
      }).catch(err=>{
      this.show=false
      })

    },
    formateDate(date) {
      return parseTime(date);
    },
    handleSizeChange(val) {
    this.limit=val
    this.init()
  },
  handleCurrentChange(val) {
    this.offset=val
    this.init()
  },
    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        account_id:this.sendData.account_id,
        offset: this.offset,
        limit: this.limit,
      };
      getWxMediaInfo(data,'/tencent/video/list').then((res) => {
        this.showLoading=false;
        if(res.data.length == 0){
          this.showLoading=true;
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return;
        }
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.videoList.push(element)
        }
        try {
        this.total = res.data[0].cnt;
        if(this.sendData.list_offset){
        this.$nextTick(() => {
          this.$refs.videoList.scrollTop=this.sendData.scrollTop;
        })
        this.offset = this.sendData.list_offset
        this.limit = 20;
      }

        } catch (error) {
          this.total=0;
        }
      });
    },
  },
};
</script>
<style scoped>
.loadingBox{
  text-align: center;
  width: 100%;
}
.videoDetailsHeader{
  height: 50px;
  display: flex;
}
.itemBoxVideo{
  width: 49.7%;height:329px;cursor: pointer;position: relative;
  border: 1px solid #efefef;
}
.gutter-example>div{
 margin-bottom: 1px;
}

.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.btnBiaoji{
  position: absolute;
  top: 20px;
}
.biaozhuimg{
  width: 60px;
  height: 60px;
  position: absolute;
  top: 5px;
  right: 10px;
}
p{
  border: 1px solid rgb(235, 235, 235);
  padding-left: 10px;
}
.ant-row {
  margin: 0 !important;
}
.gutter-example {
  width: 100%;
  height: 800px;
  overflow-y: auto;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2px;
}
.detailsBox{
  width: 100%;
  height: 99vh;
  overflow-y: auto;
  position: relative;
}
.detailsBox>div{
  min-height: 30px;
  line-height: 30px;
  /* padding-left:10px; */
  border-bottom:1px solid #ebebeb;
}
.playLogo{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.gutter-example::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.gutter-example::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.gutter-example::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext {
  position: absolute;
  right: 50px;
  top: 40px;
  color: #fff;
}

</style>
<style scoped>
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 2px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.videoBox {
  position: relative;
}
.fenYeBox {
  display: flex;
  padding-left: 15%;
  padding-top: 2px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .itemBoxVideo{
  width: 33%;height:268px;cursor: pointer;position: relative;
  border: 1px solid #efefef;

}

.gutter-example {
  width: 100%;
  height: 93%;
  overflow-y: auto;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2px;
}
}

/* @media screen and (min-width: 3440px) {
.gutter-example {
  width: 100%;
  height: 800px;
  overflow-y: auto;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2px;
  padding-bottom:100px;
}
} */
</style>
